@import '../../theme/index.scss';

.#{$hs-ui-prefix}-modal-mask {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: $modal-background;
	z-index: 9999;
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;

	.#{$hs-ui-prefix}-modal {
		width: $modal-width;
		height: $modal-height;
		background-color: $main-color;
        box-shadow: $modal-box-shadow;
        border-radius: $border-radius;
        padding: $modal-padding-tb $modal-padding-lr;
        overflow: hidden;

		.#{$hs-ui-prefix}-modal-wrapper {
			width: 100%;
			height: 100%;
            border-radius: $border-radius;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			align-items: center;

			.#{$hs-ui-prefix}-modal__header {
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				align-items: center;
				width: 100%;
                height: $modal-header-height;
				padding: $modal-wrapper-padding;

				.#{$hs-ui-prefix}-modal__header-title {
					font-size: 24px;
					font-weight: 600;
					background: $text-liner-gradient;
					-webkit-background-clip: text;
				}
			}

			.#{$hs-ui-prefix}-modal__body {
				flex: 1;
				width: 100%;
				padding: $modal-wrapper-padding;
				overflow: auto;
			}

			.#{$hs-ui-prefix}-modal__footer {
				width: 100%;
				height: $modal-footer-height;
				display: flex;
				flex-direction: row;
				justify-content: flex-end;
				align-items: center;
				padding: $modal-wrapper-padding;

                .#{$hs-ui-prefix}-button {
                    box-shadow: $modal-button-shadow;
                }

				.#{$hs-ui-prefix}-modal__footer-cancel {
					margin-right: 24px;
				}

				.#{$hs-ui-prefix}-modal__footer-ok {
					background: $liner-gradient;

					button {
						color: $deep-bg-text-color;

						&:hover {
							color: $deep-bg-active-text-color;
						}
					}
				}
			}
		}
	}
    
    .#{$hs-ui-prefix}-button {
        box-shadow: $modal-button-shadow;
    }
}

.#{$hs-ui-prefix}-modal-mask_top {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: flex-start;

	.#{$hs-ui-prefix}-modal {
		margin-top: 24px;
	}
}
.#{$hs-ui-prefix}-modal-mask_bottom {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: flex-end;

	.#{$hs-ui-prefix}-modal {
		margin-bottom: 24px;
	}
}
